/**
*@Description:DateTimePicker，时间选择组件 https://youzan.github.io/vant/#/zh-CN/datetime-picker
*@Author:nnf
*@Date:2020/09/15 16:48:51
*@todo:
*@param:{Boolean}--showDatePicker--是否展示判断标志 required
*@param:{String}--dateText--选中日期 required
*@param:{Number}--column--列表可视化展示item数量
*@param:{Date}--minDate--组件范围--最小日期
*@param:{Date}--maxDate--组件范围--最大日期
*@param:{Date}--currentDate--组件默认选中日期
*@param:{String}--dateTpye-- 时间格式 date datetime time year-month month-day datehour 默认date
*@useage:<base-date-picker :showDatePicker.sync="showDate" v-model="dateText"></base-date-picker>
*/
<template>
  <div>
    <van-popup v-model="tempShowDatePicker" position="bottom" @click-overlay="close">
      <van-datetime-picker
        ref="datetime"
        show-toolbar
        confirm-button-text="确定"
        :visible-item-count="column"
        v-model="tempCurrentDate"
        :type="dateTpye"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="close"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { Popup, DatetimePicker } from 'vant';

export default {
  name: 'BaseDatePicker',
  components: {
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
  },
  props: {
    showDatePicker: { // 选区展示标志
      type: Boolean,
      required: true,
    },
    dateText: { // 选中内容
      type: String,
    },
    column: { // 可视化项目数量
      type: Number,
      required: false,
      default: 6,
    },
    minDate: {
      type: Date,
      required: false,
      default: () => new Date(2010, 0, 1),
    },
    maxDate: {
      type: Date,
      required: false,
      default: () => new Date(2030, 0, 1),
    },
    currentDate: {
      type: Date,
      required: false,
      default: () => new Date(),
    },
    dateTpye: {
      type: String,
      required: false,
      default: () => 'date',
    },
  },
  data() {
    return {
      tempShowDatePicker: false,
      tempCurrentDate: '',
    };
  },
  watch: {
    showDatePicker(val) {
      this.tempShowDatePicker = val;
    },
  },
  created() {
    this.tempCurrentDate = this.currentDate;
  },
  methods: {
    close() {
      this.$emit('update:showDatePicker', false);
    },
    confirm(value) {
      let formatterDate;
      if (this.dateTpye !== 'date') {
        // datePicker 不支持获取秒，通过picker实例获取
        let pickVal = this.$refs.datetime.getPicker().getValues();
        let secondes = 0;
        if (Array.isArray(pickVal) && pickVal.length !== 0) {
          secondes = pickVal[pickVal.length - 1];
        }
        value.setSeconds(secondes);
        formatterDate = this.getFormatterTime(value);
      } else {
        formatterDate = this.getFormatterDate(value);
      }
      this.$emit('update:showDatePicker', false);
      this.$emit('input', formatterDate);
    },
    getFormatterDate(val) {
      const year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) { month = `0${month}`; }
      if (day >= 1 && day <= 9) { day = `0${day}`; }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}`; }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}`; }
      const formatterDate = `${year}-${month}-${day}`;
      // eslint-disable-next-line no-unused-vars
      const formatterDateHour = `${year}-${month}-${day} ${hour}:${minute}`;
      return formatterDate;
    },
    getFormatterTime(val) {
      const year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      let secondes = val.getSeconds();
      if (month >= 1 && month <= 9) { month = `0${month}`; }
      if (day >= 1 && day <= 9) { day = `0${day}`; }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}`; }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}`; }
      if (secondes >= 0 && secondes <= 9) { secondes = `0${secondes}`; }
      const formatterDateHour = `${year}-${month}-${day} ${hour}:${minute}:${secondes}`;
      return formatterDateHour;
    },
  },
};
</script>

<style lang="less" scoped>
  /deep/.van-picker__cancel {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
  }
  /deep/.van-picker__title{
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2B2B2B;
    line-height: 20px;
  }
  /deep/.van-picker__confirm {
    height: 20px;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #009B63;
    line-height: 20px;
  }
  /deep/.van-picker-column {
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2B2B2B;
  }
  /deep/.van-picker-column__item {
    font-size: 20px;
  }
  /deep/.van-picker__toolbar {
    height: 40px;
    background: #F5F5F5;
  }
</style>
